<template>
  <div>
    <Form layout="inline" :model="formState">
      <FormItem label="企业">
        <Select
          v-model:value="formState.tenantId"
          :options="tenantOpt"
          style="width: 200px"
          placeholder="请选择"
        ></Select>
      </FormItem>
      <FormItem label="应用">
        <Select
          v-model:value="formState.appId"
          :options="appOpt"
          style="width: 200px"
          placeholder="请选择"
          @change="appChange"
        ></Select>
      </FormItem>
      <FormItem label="套餐类型">
        <Select
          v-model:value="formState.packageId"
          :options="packageOpt"
          style="width: 200px"
          :disabled="disabled"
          placeholder="请选择"
        ></Select>
      </FormItem>
      <div>
        <Tooltip title="查询">
          <Button type="primary" @click="search" shape="circle"
            ><template #icon><SearchOutlined /></template
          ></Button>
        </Tooltip>
        <Tooltip title="重置">
          <Button style="margin-left: 10px" @click="reset" shape="circle"
            ><template #icon><ReloadOutlined /></template
          ></Button>
        </Tooltip>
      </div>
    </Form>
  </div>
</template>
<script lang="ts" setup>
import { Tooltip, Form, FormItem, Select, Button } from 'ant-design-vue';
import { SearchOutlined, ReloadOutlined } from '@ant-design/icons-vue';
import { ref } from 'vue';
import { AppAuthTableParams } from '/@/api/tenant-mgmt/enterpriseAppAuth/model/enterpriseAppAuthModel';
import { getAlias, getBusinessAppOpt, getPackagesOpt } from '/@/api/tenant-mgmt/enterpriseAppAuth/enterpriseAppAuth';

let formState = ref({} as AppAuthTableParams);
const appOpt = ref();
const tenantOpt = ref();
const packageOpt = ref();
const disabled = ref(true);
const getOptions = async () => {
  appOpt.value = await getBusinessAppOpt();
  tenantOpt.value = await getAlias();
};
getOptions();
const appChange = async (app) => {
  if (app) {
    disabled.value = false;
    formState.value.packageId = undefined;
    packageOpt.value = await getPackagesOpt(app);
  }
};
const emit = defineEmits(['get']);
const search = () => {
  emit('get', formState.value);
};

const reset = () => {
  disabled.value = true;
  formState.value = {} as AppAuthTableParams;
  emit('get', formState.value);
};
</script>
